<template>
  <div>
    <!-- 头部 -->

    <div class="box">
      <!-- 头部搜索 -->
      <el-form :model="form" ref="form">
        <div class="query">
          <el-form-item prop="input" style="margin-right: 20px">
            <el-input
              v-model.trim="form.input"
              placeholder="企业名称"
              class="custom-input"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="status" style="margin-right: 20px">
            <el-input
              v-model.trim="form.status"
              placeholder="职位类型"
              class="custom-input"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="styleStatus" style="margin-right: 20px">
            <el-select
              v-model="form.styleStatus"
              placeholder="请选择审核状态"
              clearable
            >
              <el-option label="待审核" value="0"></el-option>
              <el-option label="已通过" value="1"></el-option>
              <el-option label="已拒绝" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-button style="height: 40px" @click="reset">重置</el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            style="height: 40px"
            @click="selectSearch"
            >搜索</el-button
          >
        </div>
      </el-form>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column width="40"></el-table-column>
        <el-table-column prop="postname" label="职位名称"> </el-table-column>
        <el-table-column prop="company" label="公司名称"> </el-table-column>
        <el-table-column prop="address" label="工作地点"> </el-table-column>
        <el-table-column prop="salary" label="薪资范围"> </el-table-column>
        <el-table-column prop="createtime" label="发布时间"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="{ row }">
            <el-tag type="warning" v-if="row.status == 0">待审核</el-tag>
            <el-tag type="success" v-else-if="row.status == 1">已通过</el-tag>
            <el-tag type="danger" v-else>已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="handleButtonClick(scope.row, 'view')"
              >查看</el-button
            >
            <el-button
              type="success"
              plain
              size="mini"
              v-if="scope.row.status === 0"
              @click="handleButtonClick(scope.row, 'approve')"
              >通过</el-button
            >
            <el-button
              type="danger"
              plain
              size="mini"
              v-if="scope.row.status === 0"
              @click="handleReject(scope.row)"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--拒绝原因弹窗 -->
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="拒绝原因">
            <el-input
              type="textarea"
              placeholder="请输入拒绝原因"
              maxlength="400"
              v-model="reasons"
              :autosize="{ minRows: 4, maxRows: 6 }"
              show-word-limit
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <div class="bottom">
        <div
          class="paging"
          style="display: flex; justify-content: space-between"
        >
          <el-pagination
            :current-page="pageInfo.currentPage"
            layout="total"
            :total="total"
          />

          <!-- 页数选择框 -->

          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageInfo.currentPage"
            :page-size="pageInfo.pageSize"
            layout="prev, pager, next"
            :total="total"
            :hide-on-single-page="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getQueryall, getSearch, update } from "../../api/position/index";
export default {
  data() {
    return {
      // 拒绝弹窗
      dialogFormVisible: false,
      // 拒绝原因
      reasons: "",
      // 搜索判断
      addSearch: "",
      // 搜索
      form: {
        input: "",
        status: "",
        styleStatus: "",
      },
      tableData: [],
      //分页
      total: null,
      pageInfo: {
        currentPage: 1,
        pageSize: 9,
      },
    };
  },
  mounted() {
    this.selectclin();
  },
  methods: {
    //获取数据
    async selectclin() {
      let res = await getQueryall({
        pageNum: this.pageInfo.currentPage,
        pageSize: this.pageInfo.pageSize,
      });

      if (res) {
        console.log("getQueryall", res);
        this.tableData = res.list;
        this.total = res.total;
        console.log("this.tableData", this.tableData);
      } else {
        this.$message.error("数据获取失败");
      }
    },
    // 搜索重置
    reset() {
      this.selectclin();
      this.form.input = "";
      this.form.status = "";
      this.form.styleStatus = "";
      this.addSearch = "1";
    },
    // 搜索
    async selectSearch() {
      if (
        this.form.input === "" &&
        this.form.status === "" &&
        this.form.styleStatus === ""
      ) {
        this.selectclin();
        this.$message.error("请输入要查询数据");
      } else {
        let res = await getSearch({
          // 搜索
          pageNum: this.pageInfo.currentPage,
          pageSize: this.pageInfo.pageSize,
          company: this.form.input,
          type: this.form.status,
          status: this.form.styleStatus,
        });
        // console.log("res.code", res.code !== null);
        if (res.code == 200) {
          console.log("getQueryall", res);
          this.total = res.data.total;
          this.tableData = res.data.records;
          this.addSearch = "0";
        } else {
          this.$message.error("数据获取失败");
        }
      }
    },
    //分页当前页
    handleCurrentChange(newPage) {
      this.pageInfo.currentPage = newPage;
      if (this.addSearch == "0") {
        this.selectSearch(newPage);
      } else {
        this.selectclin(newPage);
      }
    },
    // 操作
    async handleButtonClick(row, action) {
      console.log("当前行数据:", row);
      // 根据 action 执行不同的逻辑
      if (action === "view") {
        this.$router.push({ path: `/positions?id=${row.id}` });
      } else if (action === "approve") {
        //获取数据
        let res = await update({
          id: row.id,
          status: 1,
        });
        console.log("000000000", res);

        if (res.code == 200) {
          this.tableData = res.list;
          this.selectclin();
        } else {
          this.$message.error("数据获取失败");
        }

        // 通过逻辑
      }
    },
    // 拒绝职位
    handleReject(row) {
      this.currentRow = row;
      this.reasons = ""; // 清空之前的拒绝原因
      this.dialogFormVisible = true;
    },
    // 确定拒绝原因
    async handleConfirm() {
      if (!this.reasons.trim()) {
        this.$message.warning("请输入拒绝原因");
        return;
      }
      // 这里可以添加提交拒绝原因的逻辑
      let res = await update({
        id: this.currentRow.id,
        status: 2,
        reasons: this.reasons,
      });
      console.log("000000000", res);

      if (res.code == 200) {
        this.tableData = res.list;
        this.selectclin();
      } else {
        this.$message.error("数据更新失败");
      }
      // 关闭弹窗
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 24px;
  height: 94vh;
  background-color: #f0f0f0;
  .query {
    width: 100%;
    height: 102px;
    padding: 20px;
    display: flex;
    background-color: white;
    // 上圆角
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
}

.demo-ruleForm {
  display: flex;
}
.input {
  margin-right: 24px;
}
.state {
  width: 60px;
  height: 25px;
  border-radius: 20px;
  text-align: center;
  line-height: 25px;
}
//  分页
.bottom {
  width: 100%;
  height: 50px;
  background-color: white;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  .paging {
    width: 100%;
    height: 30px;
    padding: 0px 48px 0px 0px;
    margin: 0 24px 24px;
    .el-pagination {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>